<template>
  <div class='content'>
    <div class='alertLabel_box'>
      <div class="alertLabel"></div>
    </div>
    <div v-if="carList.length > '0'">
      <div class='FirstCar' @click="carDetails(carListFirst)">
        <div class="imageBox" :style="{
          'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + carListFirst.car_main_pic + ') no-repeat center center',
          'backgroundSize': '100% auto'
        }"></div>
        <div class='texBox'>
          <h3>
            【{{carListFirst.storage}}】 {{carListFirst.car_style}}
          </h3>
          <p>
            {{carListFirst.mileage}}万公里 | {{carListFirst.register_date}}上牌
          </p>
          <span>
            {{carListFirst.plate_number}}
          </span>
        </div>
        <div class='phone' :class="carListFirst.isClass">
          {{carListFirst.LabelText}}
        </div>
      </div>
      <ul>
        <li v-for='(item, i) in carList' @click="carDetails(item)" class='liCar' v-if='i > 0' :key='i' :lable="item.name" :value='item.id'>
          <div class="imageBox" :style="{
            'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic + ') no-repeat center center',
            'backgroundSize': '100% auto'
          }"></div>
          <div class='texBox'>
            <h3>
              【{{item.storage}}】 {{item.car_style}}
            </h3>
            <p>
              {{item.mileage}}万公里 | {{item.register_date}}上牌
            </p>
            <span>
              {{item.plate_number}}
            </span>
          </div>
          <div class='phone' :class="item.isClass">
            {{item.LabelText}}
          </div>
        </li>
      </ul>
      <pagination class='pagination1' :page-size='pageSize' :item-count='totalCount' @gotopage='gotopage'></pagination>
    </div>
    <div v-else class='isNodata'>
      <div>
        <img src='../../static/img/PersonalCenter/img_car_nodata.png' />
        <p>暂无车辆</p>
      </div>
    </div>
  </div>
</template>
<script>
// 引入分页
import pagination from './pagination.vue'
export default {
  data () {
    return {
      carList: {},
      carListFirst: {},
      userLis: {},
      pageSize: '1',
      totalCount: '6',
      getpages: {
        userId: '',
        index: '1',
        pageSize: '6'
      },
      getUrls: ''
    }
  },
  props: {
    pros: {
      type: Object
    }
  },
  components: {pagination},
  mounted () {
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
    this.getUrls = this.pros.urls
    this.getpages.userId = this.userLis.id
    this.carList.length = 1
    // this.getCarList()
  },
  watch: {
    getpages: {
      handler: function (val, oldVal) {
        this.getCarList()
      },
      deep: true
    }
  },
  methods: {
    // 提示信息
    alertLabelShow (c) {
      $('.alertLabel_box').eq(0).fadeIn(0)
      $('.alertLabel_box>.alertLabel').text(c)
      setTimeout(function () {
        $('.alertLabel_box').eq(0).fadeOut(0)
        $('.alertLabel_box>.alertLabel').text('')
      }, 3000)
    },
    // 获取数据
    getCarList () {
      let _this = this
      this.$http({
        url: _this.getUrls,
        params: _this.getpages,
        headers: {'from': 'web'}
      }).then(r => {
        // console.log(r)
        // r.data.data.content.splice(1)
        // r.data.data.content=[]
        let con = r.data.data.content
        for (let x = 0; x < con.length; x++) {
          switch (con[x].status) {
            case '0':
              con[x].LabelText = '投标中'
              con[x].isClass = 'yello'
              con[x].isShow = true
              break
            case '1':
              con[x].LabelText = '投标结束'
              con[x].alertTex = '投标已结束'
              con[x].isClass = 'yello'
              con[x].isShow = false
              break
            case '2':
              con[x].LabelText = '竞拍中'
              con[x].isClass = 'orange'
              con[x].isShow = true
              break
            case '3':
              con[x].LabelText = '竞拍结束'
              con[x].alertTex = '竞拍已结束'
              con[x].isClass = 'orange'
              con[x].isShow = false
              break
            case '4':
              con[x].LabelText = '竞拍结束'
              con[x].isClass = 'orange'
              con[x].alertTex = '竞拍已结束'
              break
            case '5':
              con[x].LabelText = '等待竞拍'
              con[x].isClass = 'orange'
              con[x].isShow = true
              break
            case '6':
              con[x].LabelText = '投标结束'
              con[x].isClass = 'yello'
              con[x].alertTex = '投标已结束'
              break
            case '7':
              con[x].LabelText = '等待投标'
              con[x].isClass = 'yello'
              break
            default:
              con[x].LabelText = ''
              break
          }
        }
        _this.carList = con
        for (let i = 0; i < _this.carList.length; i++) {
          _this.carList[i].register_date = _this.carList[i].register_date.substring(0, 4) + '年' + _this.carList[i].register_date.substring(5, 7) + '月'
          _this.carList[i].mileage = (_this.carList[i].mileage / 10000).toFixed(2)
        }
        _this.carListFirst = _this.carList[0]
        // _this.carListFirst.mileage = (_this.carListFirst.mileage / 10000).toFixed(2)
        _this.pageSize = r.data.data.size
        _this.totalCount = r.data.data.totalElements
        // console.log(_this.carList)
      })
    },
    // 点击分页
    gotopage (val) {
      this.getpages.index = val
    },
    // 点击进入详情
    carDetails (x) {
      if (x.status === '0' || x.status === '2' || x.status === '5' || x.status === '7') {
        this.$router.push({path: '/buyCar/DetailsPage', name: '/buyCar/DetailsPage', query: x})
      } else {
        this.alertLabelShow(x.alertTex)
        // this.$router.push({path: '/personal/carDetails', name: '/personal/carDetails', query: x})
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.orange{
  background: #ff6f3c;
}
.red{
  background: #e50303;
}
.yello{
  background: #fdc125;
}
.green{
  background: #19b233;
}
.content{
  position: relative;
  .alertLabel_box{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
  }
  .alertLabel{
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    margin-left: -70px;
    margin-top: -25px;
    z-index: 1000;
  }
  .liCar{
    overflow: hidden;
    padding: 10px 30px;
    border-top: 1px solid #e3e3e3;
    cursor: pointer;
    img, .imageBox{
      width: 180px;
      height: 120px;
      float: left;
      background-size: 100% auto !important;
    }
     .texBox{
      float: left;
      margin-left: 20px;
      color: #333;
      width: 510px;
      h3{
        font-size: 16px;
        margin-top: 10px;
        overflow: hidden;
        height: 16px;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-left: -9px;
      }
      p{
        font-size: 14px;
        color: #666;
        margin: 28px 0;
      }
      span{
        font-size: 14px;
        color: #333;
      }
    }
    .phone{
      float: right;
      font-size: 16px;
      color: #fff;
      width: 100px;
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      margin-top: 44px;
      text-align: center;
    }
  }
  .FirstCar{
    overflow: hidden;
    padding: 30px 30px 10px;
    cursor: pointer;
    img, .imageBox{
      width: 180px;
      height: 120px;
      float: left;
      background-size: 100% auto !important;
    }
    .texBox{
      float: left;
      margin-left: 20px;
      color: #333;
      width: 510px;
      h3{
        font-size: 16px;
        margin-top: 10px;
        overflow: hidden;
        height: 16px;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-left: -9px;
      }
      p{
        font-size: 14px;
        color: #666;
        margin: 28px 0;
      }
      span{
        font-size: 14px;
        color: #333;
      }
    }
    .phone{
      float: right;
      font-size: 16px;
      color: #fff;
      width: 100px;
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      margin-top: 44px;
      text-align: center;
    }
  }
  .pagination1{
    margin-top: 20px;
    margin-bottom: 35px;
  }
  .isNodata{
    div{
      width: 200px;
      height: 180px;
      margin: 320px auto;
      img{
        width: 200px;
        height: 142px;
      }
      p{
        text-align: center;
        margin-top: 20px;
        font-size: 18px;
        color: #666;
        width: 185px;
      }
    }
  }
}
</style>
